<!--
 * @Author: quit
 * @Date: 2021-11-16 17:49:05
 * @LastEditTime: 2021-12-29 15:29:23
 * @Descripttion: 项目管理
 * @页面刷新 location.reload()
-->
<template>
    <div id="ProjectManagement-content">
        <div class="app-container">
            <el-card>
                <el-row class="row1">
                    <!-- 搜索区域 -->
                    <el-divider content-position="left">{{ $t('divider.divider1') }}</el-divider>
                    <div class="search">
                        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item :label="$t('table.appName')">
                                <el-input v-model="searchForm.appname" :placeholder="$t('input.searchPlaceholder')" />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="el-icon-zoom-in" @click="getAppLists">{{ $t('button.search') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-row>
                <el-row>
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="addItemsBtn">{{ $t('button.addItems') }}</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="batchRemove">{{ $t('button.batchRemove') }}</el-button>
                    <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="goToBotHome">跳转项目后台携带参数ID：1</el-button> -->
                </el-row>
                <el-row>
                    <!-- 表格 -->
                    <el-table ref="tabel" v-loading="loading" :data="tableData" :empty-text="$t('table.emptyText')" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" min-width="40" fixed="left" />
                        <el-table-column prop="appid" label="ID" min-width="45" fixed="left" />
                        <el-table-column prop="appname" :label="$t('table.appName')" min-width="120" fixed="left" />
                        <el-table-column prop="applongitude" :label="$t('table.longitude')" min-width="100" />
                        <el-table-column prop="applatitude" :label="$t('table.latitude')" min-width="100" />
                        <el-table-column prop="appprovince" :label="$t('table.province')" min-width="80" />
                        <el-table-column prop="appcity" :label="$t('table.city')" min-width="70" />
                        <el-table-column prop="apparea" :label="$t('table.area')" min-width="70" />
                        <el-table-column prop="appjzarea" :label="$t('table.acreage')" min-width="80" />
                        <el-table-column prop="applogotype" :label="$t('table.logoType')" min-width="90" />
                        <el-table-column prop="apptype" :label="$t('table.projectType')" min-width="100" />
                        <el-table-column prop="appserverip" :label="$t('table.serverId')" min-width="100" />
                        <el-table-column prop="appserverport" :label="$t('table.portId')" min-width="80" />
                        <el-table-column prop="appserveruser" :label="$t('table.username')" min-width="120" />
                        <el-table-column prop="appserverpass" :label="$t('table.password')" min-width="120" />
                        <el-table-column header-align="center" align="center" fixed="right" :label="$t('table.operable')" min-width="290">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="goToBotHome(scope.row)">{{ $t('button.intoTheProject') }}</el-button>
                                <el-button type="success" size="mini" @click="editHandle(scope.row)">{{ $t('button.edit') }}</el-button>
                                <el-button type="danger" size="mini" @click="deleteHandle(scope.row)">{{ $t('button.delete') }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination
                        :current-page="pages.page"
                        :page-sizes="[1, 5, 10]"
                        :page-size="pages.size"
                        layout="prev, pager, next, total, sizes, jumper"
                        :total="pages.total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </el-row>
            </el-card>
        </div>
        <!-- 添加提示框 -->
        <el-dialog class="addDialog" :title="dialogState ? '编辑项目' : '新增项目'" :visible.sync="dialogVisible" width="75%" @close="dialogClose">
            <div class="dialog-container">
                <el-form ref="dialogForm" :model="dialogForm" :rules="dialogFormRules" label-position="right">
                    <el-divider class="one" content-position="left">基本信息</el-divider>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="项目名称" :label-width="formLabelWidth" prop="appname">
                                <el-input v-model="dialogForm.appname" placeholder="请填写项目名称" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="项目类型" :label-width="formLabelWidth" prop="apptype">
                                <el-select v-model="dialogForm.apptype" placeholder="请选择项目类型" clearable>
                                    <el-option v-for="(item, index) in apptypeData" :key="index" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="项目面积" :label-width="formLabelWidth" prop="appjzarea">
                                <el-input v-model="dialogForm.appjzarea" placeholder="请填写项目面积" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="项目人员" :label-width="formLabelWidth" prop="apppersonnum">
                                <el-input v-model="dialogForm.apppersonnum" placeholder="请填写项目人员数量" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="项目时间" :label-width="formLabelWidth" prop="appstarttime">
                            <el-date-picker v-model="dialogForm.appstarttime" class="select-time" type="datetime" placeholder="选择日期时间" @change="selectTime" />
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="项目描述" :label-width="formLabelWidth" prop="appdescribe">
                            <el-input v-model="dialogForm.appdescribe" type="textarea" :rows="3" placeholder="请输入项目描述" />
                        </el-form-item>
                    </el-row>
                    <el-divider class="two" content-position="left">地理位置</el-divider>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="项目地址" :label-width="formLabelWidth">
                                <el-cascader v-model="regionValue" clearable :placeholder="regionMsg" :options="regionData" :props="cascaderProps" @change="cascaderChange" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="经度" :label-width="formLabelWidth" prop="applongitude">
                                <el-input v-model="dialogForm.applongitude" placeholder="请填写项目经度" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="纬度" :label-width="formLabelWidth" prop="applatitude">
                                <el-input v-model="dialogForm.applatitude" placeholder="请填写项目纬度" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-divider class="three" content-position="left">数据库信息</el-divider>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="数据库IP" :label-width="formLabelWidth" prop="appserverip">
                                <el-input v-model="dialogForm.appserverip" placeholder="请填写项目数据库IP地址" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="端口号" :label-width="formLabelWidth" prop="appserverport">
                                <el-input v-model="dialogForm.appserverport" placeholder="请填写项目端口号" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="登录账户" :label-width="formLabelWidth" prop="appserveruser">
                                <el-input v-model="dialogForm.appserveruser" placeholder="请填写项目登录账户" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="登录密码" :label-width="formLabelWidth" prop="appserverpass">
                                <el-input v-model="dialogForm.appserverpass" placeholder="请填写项目登录密码" autocomplete="off" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div v-if="dialogState">
                        <el-divider content-position="left">Logo</el-divider>
                        <el-row>
                            <el-col :span="6">
                                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                                    <i slot="default" class="el-icon-plus" />
                                    <div slot="file" slot-scope="{ file }">
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                                <i class="el-icon-zoom-in" />
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                                <i class="el-icon-download" />
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                                <i class="el-icon-delete" />
                                            </span>
                                        </span>
                                    </div>
                                </el-upload>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="!dialogState" type="primary" @click="addItems">确 定</el-button>
                <el-button v-if="dialogState" type="primary" @click="editItme">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getAppList, appDeleteItme, appDeleteItmes, addIimes, appEidtItme } from '@/api/BmRequest'
import regionData from '@/assets/data/region'
import { parseTime } from '@/utils/index'
// import { validateIsInt } from '@/utils/validate'

export default {
    components: {},
    data() {
        return {
            searchForm: { appname: '' }, // 搜索表单绑定值
            tableData: [], // 表格绑定值
            checkedItmes: [], // 多选项目ID的数组
            pages: { page: 1, size: 10, total: 0 }, // 分页组件绑定数据
            loading: false, // tabel加载标识变量
            dialogVisible: false, // 弹出框显示\隐藏标识变量
            // 弹出层表单绑定值
            dialogForm: {
                appname: '',
                applongitude: '',
                applatitude: '',
                appgj: '',
                appprovince: '',
                appcity: '',
                apparea: '',
                appdescribe: '',
                appjzarea: '',
                appstarttime: '',
                apppersonnum: '',
                applogotype: 0,
                applogotext: '',
                applogoimgpath: '',
                appimgpath: '',
                apptype: '',
                appisdelete: 0,
                appserverip: '',
                appserverport: '',
                appserveruser: '',
                appserverpass: ''
            },
            // 弹出层表单验证规则
            dialogFormRules: {
                appname: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                apptype: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appjzarea: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                apppersonnum: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appstarttime: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appdescribe: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                applongitude: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                applatitude: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appserverip: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appserverport: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appserveruser: [{ required: true, trigger: 'blur', message: '当前项不能为空' }],
                appserverpass: [{ required: true, trigger: 'blur', message: '当前项不能为空' }]
            },
            formLabelWidth: '100px', // 表单label宽度
            apptypeData: [
                {
                    value: 0,
                    label: 'IBMS系统集成'
                },
                {
                    value: 1,
                    label: '电力系统'
                }
            ],
            regionData, // 地址选择源数据
            regionValue: [], // 地址选择框绑定值
            regionMsg: '', // 地址选择提示文字,编辑数据回显
            // 地址选择树形数据渲染匹配
            cascaderProps: {
                expandTrigger: 'hover',
                value: 'value',
                label: 'label',
                children: 'children'
            },
            dialogState: false // 弹出框状态 true 为编辑 false 为新增
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {
        this.getAppLists()
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        // 获取项目数据
        async getAppLists() {
            this.loading = true
            const obj = {
                appmanager: {
                    appname: this.searchForm.appname,
                    appisdelete: 0
                },
                pages: {
                    page: this.pages.page,
                    size: this.pages.size
                }
            }
            try {
                const { data } = await getAppList(obj)
                this.tableData = data.records
                this.pages.page = data.current
                this.pages.size = data.size
                this.pages.total = data.total
            } catch (error) {
                console.log(error)
            } finally {
                this.loading = false
            }
        },

        // 表格多选事件
        async handleSelectionChange(val) {
            const arr = []
            val.forEach((item, i) => {
                arr.push(item.appid)
            })
            this.checkedItmes = arr
        },

        /* 添加项目 start */
        // 添加项目按钮
        addItemsBtn() {
            this.dialogVisible = true
            this.dialogState = false
            this.regionMsg = '请选着项目地址'
        },
        // 添加项目,选着时间
        selectTime(time) {
            const newDate = parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
            this.dialogForm.appstarttime = newDate
        },
        // 项目地址选择事件
        cascaderChange(value) {
            this.dialogForm.appgj = '中国'
            if (value.length === 1) {
                this.dialogForm.appprovince = value[0]
            } else if (value.length === 2) {
                this.dialogForm.appprovince = value[0]
                this.dialogForm.appcity = value[1]
            } else {
                this.dialogForm.appprovince = value[0]
                this.dialogForm.appcity = value[1]
                this.dialogForm.apparea = value[2]
            }
        },
        // 添加项目请求
        addItems() {
            this.$refs.dialogForm.validate(async valid => {
                if (valid) {
                    try {
                        const { message } = await addIimes(this.dialogForm)
                        this.$message.success({ message })
                        this.dialogVisible = false
                    } catch (error) {
                        console.log(error)
                    } finally {
                        this.getAppLists()
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        /* 项目添加 end */

        // 批量删除事件
        async batchRemove() {
            if (this.checkedItmes.length > 0) {
                this.$confirm('此操作将删除所选项目, 是否继续?', '确认操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(async () => {
                        if (this.checkedItmes.length === this.tableData.length) {
                            if (this.pages.page > 1) {
                                this.pages.page--
                            } else {
                                this.pages.page = 1
                            }
                        }
                        const { message } = await appDeleteItmes(this.checkedItmes)
                        await this.getAppLists()
                        this.$message.success({ message })
                    })
                    .catch(error => {
                        console.log(error)
                        this.$refs.tabel.clearSelection()
                    })
            } else {
                this.$message.warning('请选择需要删除的项目')
            }
        },

        /* 弹出框事件 start */
        // 弹出框取消事件
        dialogClose() {
            this.dialogForm = {
                appname: '',
                applongitude: '',
                applatitude: '',
                appgj: '',
                appprovince: '',
                appcity: '',
                apparea: '',
                appdescribe: '',
                appjzarea: '',
                appstarttime: '',
                apppersonnum: '',
                applogotype: 0,
                applogotext: '',
                applogoimgpath: '',
                appimgpath: '',
                apptype: '',
                appisdelete: 0,
                appserverip: '',
                appserverport: '',
                appserveruser: '',
                appserverpass: ''
            }
            this.regionValue = []
            this.$refs.dialogForm.clearValidate()
        },
        /* 弹出框事件 end*/

        /* table-item 操作按钮 start */
        // 单项目后台跳转
        goToBotHome(data) {
            if (data.appid) {
                this.$store.commit('router/VueXSetBotState', { id: data.appid, name: data.appname })
                this.$router.push('/Construction')
            } else {
                this.$store.commit('router/VueXSetBotState', { id: 1, name: '测试' })
                this.$router.push('/Construction')
            }
        },
        // 编辑按钮
        editHandle(data) {
            this.dialogVisible = true
            this.dialogState = true
            this.dialogForm = data
            this.regionMsg = [data.appprovince, data.appcity, data.apparea].join(' / ')
        },
        /* 编辑提交 */
        editItme() {
            this.$refs.dialogForm.validate(async valid => {
                if (valid) {
                    try {
                        const { message } = await appEidtItme(this.dialogForm)
                        this.dialogVisible = false
                        await this.getAppLists()
                        this.$message.success(message)
                    } catch (error) {
                        console.log(error)
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 删除按钮
        deleteHandle(data) {
            this.$confirm('此操作将删除当前项目, 是否继续?', '确认操作', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    const { message } = await appDeleteItme(data.appid)
                    if (this.tableData.length === 1) {
                        if (this.pages.page > 1) {
                            this.pages.page--
                        } else {
                            this.pages.page = 1
                        }
                    }
                    await this.getAppLists()
                    this.$message.success({ message })
                })
                .catch(error => {
                    console.log(error)
                })
        },
        /* table-item 操作按钮 end */

        /* 分页栏 start */
        // 页码选择事件
        handleCurrentChange(newPage) {
            this.pages.page = newPage
            this.getAppLists()
        },
        // 表格显示条数选择事件
        handleSizeChange(newSize) {
            this.pages.size = newSize
            this.getAppLists()
        }
        /* 分页栏 end */
    }
}
</script>

<style scoped>
.el-table {
    margin-top: 10px;
}
.el-form {
    margin-left: 0;
}
.el-row {
    padding: 5px 0;
}
::v-deep .el-dialog__body {
    padding: 15px 20px;
}
::v-deep .el-divider {
    margin: 14px 0 !important;
}
</style>

<style lang="scss" scoped>
.row1 {
    margin-bottom: 10px;
    .search {
        border: 1px solid #dcdfe6;
        border-top: none;
        padding: 34px 10px 10px 10px;
        margin-top: -14px;
        .el-input {
            width: 300px;
        }
    }
}
.dialog-container {
    .el-input,
    .el-select,
    .el-textarea,
    .el-cascader {
        width: calc(100% - 20px);
    }
    .select-time {
        width: 20% !important;
    }
    .one {
        .el-divider__text {
            padding: 2px 20px;
            background-color: #1a73e8;
            color: #f9f9f9;
        }
    }
    .two {
        .el-divider__text {
            padding: 2px 20px;
            background-color: #ccc451;
            color: #f9f9f9;
        }
    }
    .three {
        .el-divider__text {
            padding: 2px 20px;
            background-color: #e8961a;
            color: #f9f9f9;
        }
    }
}
</style>
